<template>
  <div id="index">
    <div class="con">
        <div class="item-box">
            <router-link class="item" v-for="blog in blogs" :to="`/detail/${blog.id}`" :key="blog.id">
                <div class="title">
                    {{ blog.title }}
                </div>
                <div class="description">
                {{ blog.description }}
                </div>
                <div class="font-box">
                    <img class="font-avatar" :src="blog.avatar" ><span class="font-name">{{ blog.username }}</span>
                    <span class="font-star"><i class="el-icon-star-off"></i><span class="star-number">{{randomNumber(8,30)||15}}.{{randomNumber(1,9)||1}}</span></span>
                </div>
            </router-link>
        </div>
        <!-- <div class="nav"></div> -->
    </div>
    <div class="blank"></div>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="total"
      :current-page="page"
      @current-change="onPageChange"
    >
    </el-pagination>
    <div class="blank"></div>
  </div>
</template>
<script>
import blog from "@/api/blog.js";
export default {
  data() {
    return {
      blogs: [],
      total: 1,
      page: 1
    };
  },
  created() {
    console.log('index created')
    this.page = parseInt(this.$route.query.page) || 1;
    blog.getIndexBlogs({ page: this.page }).then((res) => {
      console.log('create',res);
      this.blogs = res.data;
      this.total = res.totalPage;
      this.page = res.page;
    });
  },
  methods: {
    randomNumber(min,max){
        return Math.floor(Math.random() * (max - min + 1) ) + min
    },
    onPageChange(newPage) {
      console.log(newPage);
      blog.getIndexBlogs({ page: newPage }).then((res) => {
        console.log(res);
        this.blogs = res.data;
        this.total = res.totalPage;
        this.page = res.page;
        this.$router.push({ path: "/", query: { page: newPage } });
      });
    },
  },
};
</script>
<style src="./index.less" lang="less"></style>